
<!DOCTYPE html>
<!-- 
  s60sc 2022
-->
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ESP32-CAM_AUX</title>
    <link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="80" font-size="80">📷</text></svg>'>
    
    <style>
      :root {
        /* colors used on web pages - see https://www.w3schools.com/colors/colors_names.asp */
        --buttonReady: crimson;
        --buttonActive: ForestGreen;
        --buttonHover: green;
        --buttonText: white;
        --buttonLabel: black;
        --itemInactive: gray;
        --menuBackground: transparent; 
        --inputText: navy;
        --pageText: WhiteSmoke; 
        --inputBackground: WhiteSmoke; 
        --alertMsg: orange;
        --itemBorder: silver; 
        --pageBackground:#181818; /* nearly black */
        
        /* logcolors */
        --warnColor: orange;
        --errColor: red;
        --chkColor: green;
        --dbgColor: blue;
        
        /* element sizes */
        --bodySize:1rem; /* used as basis for element, padding, and font sizes */
        --buttonSize: var(--bodySize);
        --buttonHalf: calc(var(--buttonSize) / 2);
        --buttonQuart: calc(var(--buttonSize) / 4);
        --buttonDbl: calc(var(--buttonSize) * 2);
        --inputSize: calc(var(--bodySize) * 0.9);
        --headingSize: calc(var(--bodySize) * 1.25);
        --subheadingSize: var(--bodySize);
        --footerSize: calc(var(--bodySize) * 0.7);
        --smallThumbSize: 1rem; /* must be specific value, not calc */
        --bigThumbSize: 2rem; /* must be specific value, not calc */
        --markerSize: 1rem; /* must be specific value, not calc */
      }
      
      html body {height: 100%;}
      
      body {
        font-family: Helvetica  !important;
        background: var(--pageBackground);
        color: var(--pageText);
        font-size: var(--bodySize); 
      }

      .hidden {
        display: none;
      }
      
      progress {
        accent-color: var(--buttonActive); 
        width: calc(var(--buttonSize) * 15);
      }
      
      .fixed {
        position: fixed;
        top: 0;
      }
      
      .alertMsg {
        left:10%;
        bottom: var(--buttonDbl);
        position:absolute;
        display:block;
        color:var(--alertMsg);
        z-index:20;
        height: var(--buttonDbl);
      }

      .header {
        font-size: var(--headingSize);
        padding-left: var(--buttonHalf);
        font-weight:bold; 
      }
      
      .subheader {
        font-style: italic;
        font-size: var(--subheadingSize);
        padding-left: var(--buttonQuart);
      }
      
      .tab {
        display: flex;
        overflow: hidden;
        background: var(--menuBackground);
      }

      .tab button {
        background: var(--buttonReady);        
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: var(--buttonHalf);
        transition: 0.3s;
        font-size: calc(var(--buttonSize) * 1.1);
      }
      
      .tab button.active {
        box-shadow: 0 0 0 var(--buttonQuart) var(--buttonActive);
        background: var(--buttonActive);
      }
      
      .tab button.hover {
        background: var(--buttonHover);
      }
      
      .tab button.disabled {
        cursor: default;
        background: var(--itemInactive)
      }
      
      .tabcontent {
        display: none;
      }

      .grid-cols3 {
        grid-template-columns: calc(var(--buttonSize) * 14) calc(var(--buttonSize) * 12) calc(var(--buttonSize) * 12);
      }

      .grid-cols4 {
        grid-template-columns: calc(var(--buttonSize) * 10) calc(var(--buttonSize) * 10) calc(var(--buttonSize) * 10) calc(var(--buttonSize) * 10)
      }

      .grid-cols3, .grid-cols4 {
        display: grid;
        background: none;
        text-align: center;
        font-size: var(--inputSize);
        fill: var(--buttonLabel);
        border: 0px solid var(--itemBorder);
        dominant-baseline: middle;
        text-anchor: middle;
      }
      
      .cfgTitle {
        grid-column: 1/5;
        text-align: left;
      }

      svg {
        width: calc(var(--buttonSize) * 8);
        height: var(--buttonDbl);
      }
      
      rect {
        fill: var(--buttonReady);
        width: 100%;
        height: 100%; 
        x: 0;
        y: 0;
        ry: 15%;
      }
      
      .buttonRect:focus {
        fill: var(--buttonActive);
        outline: none; /* Remove focus outline if not needed */
      }
      
      rect:hover{
        fill: var(--buttonHover);
      }
    
      text {
        font-size: var(--buttonSize); 
        fill: var(--buttonText);
        transform: translate(50%, 50%);
        pointer-events: none; 
      } 
     
      .panel {
        padding: 0 var(--buttonSize);
        display: none;
        background-color: var(--pageBackground);
        overflow: hidden;
      }
      
      button {
        display: block;
        margin: var(--buttonQuart);
        padding: var(--buttonQuart);
        border: 0;
        line-height: var(--headingSize);
        cursor: pointer;
        color: var(--buttonText);
        background: var(--buttonReady);
        border-radius: var(--buttonQuart);
        font-size: var(--buttonSize);
        outline: 0
      }

      button:active {
       box-shadow: 0 0 0 var(--buttonQuart) var(--buttonActive);
       background: var(--buttonActive);
      }

      button:hover {
        background: var(--buttonHover);
      }

      button:disabled {
        cursor: default;
        background: var(--itemInactive)
      }
      
      .input-group {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        line-height: var(--buttonDbl);
        margin-top: var(--buttonHalf);
      }
      
      .input-group>label {
        display: inline-block;
        padding-right: var(--buttonHalf);
        min-width: 40%;
      }
      
      .input-group>input {
        width: 100%;
      }

      .input-group input,.input-group select {
        flex-grow: 1
      }
      
      input {
        height: calc(var(--inputSize) * 1.5);
        border-radius: var(--buttonQuart);
      }
      
      input, #appLog {
        font: var(--inputSize) 'Courier New';
        font-weight:bold;
        color: var(--inputText);
        background: var(--inputBackground);
        min-width: calc(var(--buttonSize) * 10);       
      }
      
      input[type="radio"], input[type="checkbox"], progress {
        accent-color: var(--buttonActive);
      }

      input[type="text"]{
        font-size: var(--inputSize); 
        width: calc(var(--buttonSize) * 6);
      }
      
      input[type="checkbox"] {
        width : calc(var(--inputSize) * 1.5);
        height : calc(var(--inputSize) * 1.5);
        margin-top: calc(var(--buttonQuart) * -1);
      }
      
      input[type="radio"] {
        width: var(--inputSize);
        height: var(--inputSize);
        min-width: var(--buttonSize);
      }
      
 /*     input[type="number"]:not(.configItem), input[type="time"] {
        font-size: var(--buttonDbl);
        border: 1px solid var(--itemBorder);
        margin-bottom: var(--buttonQuart);
        min-width: calc(var(--buttonSize) * 7);
        text-align: center;
      } */
      input[type="number"] {
        height: var(--buttonSize);
      }
      
      input[type=number]::-webkit-inner-spin-button {
        opacity: 1;
      }
      
      input[type="button"]:focus {
        background-color: var(--buttonActive);
      }
      
      #appLog {
        height:50vh;
        width:90%;
        border:2px solid var(--itemBorder);
        overflow:auto;
        background: var(--inputBackground);
      }
      
      select {
        border: 1px solid var(--menuBackground);
        font-size: var(--inputSize);
        outline: 0;
        border-radius: var(--buttonQuart);
        margin-top: 2px;
      }
      
      .selectField {
         height: calc(var(--inputSize) * 1.5);
      }
      
      table {
        border-collapse:collapse; 
        table-layout:fixed;
        background: var(--menuBackground);
        text-align: left;
      }
      
      th, td {
        font-weight:bold; 
      }
      
      .config-group th, .config-group td {
        border: 0;
        padding: var(--buttonHalf) var(--buttonHalf) 0 var(--buttonHalf); 
        padding-left: var(--buttonSize);
        line-height: var(--buttonDbl);
        font-size: var(--buttonSize);
      }
      
      .configGroup td input[type="number"] {
        font-size: var(--buttonSize);
      }
      
      input.configItem[type="radio"] {
        min-width: var(--buttonSize); 
      }
      
      input.configItem[type="number"] {
        min-width: calc(var(--buttonSize) * 3); 
        width: calc(var(--buttonSize) * 3); 
      }
      
      .svgCols {
        width: calc(var(--buttonSize) * 9); 
        height: calc(var(--buttonSize) * 2.5);  
        fill: var(--buttonLabel);
        font-size: calc(var(--buttonSize) * 1.5);
      }   
      
      .svgIcon {
        width: var(--buttonDbl);
        height: var(--buttonDbl);
      }
      
      rect.RCon {
        fill: var(--buttonActive);
      }
      
      rect.RCoff {
        fill: var(--buttonReady);
      }
      
      .upperText {
        transform: translate(50%,30%);  
      }
      
      .lowerText {
        transform: translate(50%,70%);  
      }
      
      .midText {
        transform: translate(50%,50%); 
      }
      
      
      /*** range slider ***/
      
      .input-group>input[type=range]  {
        min-width: calc(var(--markerSize) * 8);  
      }
      
      input[type=range] {
        -webkit-appearance: none;
        background: transparent;
      }

      input[type=range]::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        width: 100%;
        height: 2px;
        background: var(--inputBackground); 
        margin-top: 2px;
      }

      input[type=range]::-webkit-slider-thumb {
        /* location of thumb relative to track */
        height: var(--smallThumbSize);
        width: var(--smallThumbSize);
        border-radius: 50%;
        background: var(--buttonReady); 
        -webkit-appearance: none;
        margin-top: calc(-0.5 * var(--smallThumbSize));
      }
      input[type=range].bigThumb::-webkit-slider-thumb{
        height: var(--bigThumbSize);
        width: var(--bigThumbSize);
        margin-top: calc(-0.5 * var(--bigThumbSize));
      }
      
      div[name="rangeVal"] {
        /* shape & location of marker relative to thumb */
        width: calc(var(--markerSize) * 2);
        height: var(--markerSize);
        margin-top: calc(-0.5 * var(--smallThumbSize));
        line-height: var(--markerSize);
        text-align: center;
        background: var(--buttonReady); 
        color: var(--buttonText); 
        font-size: var(--footerSize);
        display: inline;
        position: absolute;
        border-radius: 25%;
        pointer-events: none;
      }
      div[name="rangeVal"].rvThumb {
        margin-top: calc(-0.5 * var(--bigThumbSize) - var(--buttonQuart));
      }

      div[name="rangeMin"], div[name="rangeMax"] {
        display: inline-block;
        padding: 0 var(--buttonQuart);
        pointer-events: none;
      }
       

      /* checkbox slider */

      /* Hide the default checkbox */
      .switch input[type="checkbox"] {
        display: none;
      }

      /* static part */
      .switch .slider {
        width: calc(var(--buttonSize) * 3);  
        height: var(--buttonSize);
        top: calc(var(--buttonQuart) / 2);
        background: var(--itemInactive);
        position: relative;
        display: inline-block;
        border-radius: var(--buttonSize);
      }
      .switch input[type="checkbox"]:checked + .slider {
        background-color: var(--buttonActive);
      }

      /* moving part */
      .switch .slider::before {
        content: "";
        height: var(--buttonSize);
        width: var(--buttonSize);
        background: var(--inputBackground);
        position: absolute;
        left: var(--buttonQuart);
        border-radius: var(--buttonSize);
        transition: transform 0.4s;
      }
      .switch input[type="checkbox"]:checked + .slider::before {
        transform: translateX(calc(var(--buttonSize)*1.5));
      }


      .navtop{
        list-style: none;
        border: 1px solid var(--itemBorder);
        border-radius: var(--buttonQuart);
        padding: var(--buttonQuart);
        margin-top: var(--buttonHalf);
      }
      .navtop li {
       float: left;
       position: relative;
      }

      nav.menu {
        display: grid;
        flex-direction: column;
        flex-wrap: nowrap;
        min-width: calc(var(--buttonSize) * 20);
        background: var(--menuBackground);
        padding: var(--buttonHalf);
        border-radius: 0 var(--buttonQuart) var(--buttonQuart) var(--buttonQuart);
        margin-bottom: var(--buttonQuart);
        border: 1px solid var(--itemBorder);
      }
      nav.menu.buttons {
        min-width: calc(var(--buttonSize) * 25);
      }
      nav.menu.panel {
        display: none;
        min-height: calc(var(--buttonSize) * 20);
      }
      nav.menu.panel.active {
        display: block;
      }
      
      nav.quick-nav {
        width: var(--buttonDbl);
        height: var(--buttonDbl);
        margin: var(--buttonHalf) var(--buttonHalf); var(--buttonHalf) var(--buttonHalf);
        border: 1px solid var(--itemBorder);
        border-radius: var(--buttonQuart);
        cursor: pointer;
        font-size: calc(var(--buttonSize) * 1.5);
        padding: var(--buttonQuart) var(--buttonQuart) var(--buttonQuart) var(--buttonQuart);
        background: var(--buttonReady);
      }

      nav.quick-nav:hover {
        background: var(--buttonHover);
      }

      nav.quick-nav.active {
        box-shadow: 0 0 0 var(--buttonQuart) var(--buttonActive);
        background: var(--buttonActive);
      }
       
      nav#maintoolbar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        overflow: auto;
      }
      
      .nav-toggle {
        margin: 0 0 var(--buttonQuart) var(--buttonQuart);
        font-size:var(--headingSize);
        display: block;
        margin-bottom: calc(var(--buttonSize) * 3/4);
        padding-bottom: var(--buttonHalf);
        border-bottom: 1px solid var(--itemBorder);
      }
                  
      section#main {
        display: flex;
        flex-direction: column;
      }
      section#header {
        min-width: calc(var(--buttonSize) * 20);
        background: var(--menuBackground);
        margin-bottom: 2px;
        padding: 1px 1px;
        display: flex;
        flex-wrap: wrap;
        border-radius: 2px;
        justify-content: space-between;
      } 
      section#title{
        display: flex;
      }
      section#footer {
        position: fixed;
        bottom: 0;
        width: 97%;
        min-width: calc(var(--buttonSize) * 20);
        background: var(--menuBackground);
        margin-top: 0px;
        padding: var(--buttonQuart) var(--buttonHalf);
        display: flex;
        flex-wrap: wrap;
        border-radius: var(--buttonQuart) var(--buttonQuart) 0 0;
        justify-content: space-between;
        font-size: var(--footerSize);
        z-index: -1;
        border-top: 1px solid var(--itemBorder);
        border-left: 1px solid var(--itemBorder);
        border-right: 1px solid var(--itemBorder);
        border-bottom: none;
        text-align: center; 
      }
      
      section#buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
      }

      #foot-spacer {
        height: calc(var(--buttonSize) * 4);
      }
      
      .info-group {
        position: relative;                               
        margin: var(--buttonQuart) 0;
      }
      .info{
        margin-top: 2px;
      }
      .info-group label {
        color: var(--itemInactive);
      }
      
      .menu-action {
        display: none;
      }

      .menu-action + label + div {
        padding: var(--buttonHalf) 0 0 0;
        margin: var(--buttonQuart) 0 0 0;
        border-top: 1px solid var(--itemBorder);
      }

      .menu-action:not(:checked) + label + div { 
        display: none; 
      }

      .sep {
        border: 1px solid var(--itemBorder);
        height: var(--buttonDbl);
        margin: var(--buttonQuart) var(--buttonQuart) 0 var(--buttonQuart);
      }
      .vsep {
        border: 1px solid var(--itemBorder);
        margin: var(--buttonHalf) 2px;
      }

      #menu-top.menu-floating nav.menu.panel {
        border-radius: 0 var(--buttonQuart) var(--buttonQuart) var(--buttonQuart);
      }
      #menu-top.menu-pinned nav.menu.panel {
        border-radius: var(--buttonQuart) var(--buttonQuart) var(--buttonQuart);
        height: 110%;
        left: -1px;
        position: relative;
      }
      #menu-container {
        position: relative;
        min-width: calc(var(--buttonSize) * 4);
        min-height: calc(var(--buttonSize) * 20);
        border-radius: var(--buttonQuart);
        left:var(--buttonQuart);
        top: var(--buttonQuart);
      }
      #menu-container.menu-floating {
        display: table;
      }
      #menu-container.menu-pinned {
        display: flex;
      }
      #menu-top {
        display: inline-grid;
      }
      #menu-top.menu-floating {
        position: absolute;
        left: calc(var(--buttonSize) * 4);
        z-index: 2;
      }
      #menu-top.menu-pinned {
        position: initial;
        left: initial;
        float: left;
        z-index: 4;
        border-left: none;
      }
      #menu-selector {
        z-index: 4;
        background: var(--menuBackground);
        width: calc(var(--buttonSize) * 4);
      }
      #menu-selector.menu-floating {
        position: absolute;
      }
      #menu-selector.menu-pinned {
        position: relative;
        float: left;
        height: 100%;
        border-right: none;
        z-index: 5;
      }
      .menu-floating.menu-open {
        border-radius: var(--buttonQuart) 0 0 var(--buttonQuart);
        border: 1px solid var(--itemBorder);
        border-right: none;
      }
      .menu-floating.menu-closed {
        border-radius: var(--buttonQuart);
        border: 1px solid var(--itemBorder);
      }
      .menu-pinned.menu-open {
        border-radius: var(--buttonQuart) 0 0 var(--buttonQuart);
        border: 1px solid var(--itemBorder);
      }
      .menu-pinnded.menu-closed {
        border-radius: var(--buttonQuart);
        border: 1px solid var(--itemBorder);
      }
      .pin-menu {
        width: calc(var(--buttonSize) * 3/2);
        height: calc(var(--buttonSize) * 3/2);
        float: right;
        cursor: pointer;
      }

      .displayonly {
        pointer-events: none;
      }
      
      .blinking {
        animation: blinker 1.5s linear infinite;
      }

      @keyframes blinker {
        50% {
          opacity: .4;
        }
      }
      
      figure {
        padding: 0px;
        margin: 0; 
        width: 100%;
        height: auto;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0;
        margin-inline-end: 0;
      }
      
      .image-container {
        position: relative;
      }

      figure img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: var(--buttonQuart);
      }
      
      #content {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch
      }

      #sidebar{
        margin: 0px;
        padding: 0px; 
        width: 100%;
      } 

      @media (min-width: 50rem) and (orientation:landscape) {
        #content {
          display:flex;
          flex-wrap: nowrap;
          align-items: stretch
        }
        #sidebar {
          width: auto;
        } 
      }
      
      fieldset {
        margin: 0px;
      }
      #buttonContainer {
        margin-bottom: calc(var(--buttonSize) * 4);
        display: flex;
        align-items: center;
      }
      
      .touchDisabled {
        touch-action: none;
      }

    </style>
  </head>
  
  <body>
    <div class="tab">
      <ul class="navtop">
        <button class="tablinks camTab active" name="mainPage">Auxil</button>
        <button class="tablinks" name="ShowLog">Show Log</button>
        <button class="tablinks" name="EditConfig">Edit Config</button>
        <a href="/web?OTA.htm"><button class="tablinks">OTA Upload</button></a>
      </ul>
    </div>
    
    <div id="mainPage" class="tabcontent" style="display:block">
      <div id="content">
        <div id="mainPageIcons">
          <div id="sidebar">
            <div id="menu-container" class="menu-pinned">
              <nav id="menu-selector" class="menu-pinned menu-closed">
                <nav class="quick-nav" id="accSettings" name="access-settings">🔧</nav>
              </nav>
              <nav class="menu panel" id="access-settings">
                <input type="checkbox" id="other-cb" class="menu-action">
                <div class="pin-menu" title="Pin / unpin menu">📌</div>
                <label for="other-cb" class="nav-toggle">🔧&nbsp;&nbsp;Access Settings&nbsp;&nbsp;</label>
                <div class='addButtons'></div>
                <div>
                  <div class="subheader">Network settings</div>
                  <div class="input-group" id="wifi-group" style="margin-top:0">
                    <label for="netMode">Network Type</label>
                    <select id="netMode" class="selectField">
                      <option value="0">WiFi</option>
                      <option value="1">Ethernet</option>
                      <option value="2">Eth+AP</option>
                    </select>
                  </div>
                  <div class="input-group" id="wifi-group">
                    <label for="hostName">Host Name</label>
                    <input id="hostName" name="hostName" length=32 placeholder="Host name">
                  </div>
                  <div class="input-group wifi-only" id="wifi-group">
                    <label for="ST_SSID">SSID</label>
                    <input id="ST_SSID" name="ST_SSID" length=32 placeholder="Router SSID">
                  </div>
                  <div class="input-group wifi-only" id="wifi-group">
                    <label for="ST_Pass">Password</label>
                    <input id="ST_Pass" name="ST_Pass" length=64 placeholder="Router password">
                  </div>
                  <div class="input-group">
                      <label for="extIP">External&nbsp;IP</label>
                      <div id="extIP" class="displayonly">&nbsp;</div>
                  </div>
                  <br>
                  <div class="subheader">Clock settings</div>
                  <div class="input-group" id="time-group">
                    <label for="timezone">Time zone</label>
                    <input id="timezone" name="timezone" length=64 placeholder="Time zone string">
                  </div>
                  <div class="input-group" id="time-group">
                    <label for="timezoneSel">Time zone select</label>
                    <select id="timezoneSel" name="timezoneSel" class="selectField">
                      <option value="" selected>&nbsp;-- Select --</option>
                      <option value="EET-2EEST-3,M3.5.0/03:00:00,M10.5.0/04:00:00">Europe/Athens</option>
                      <option value="GMT0BST,M3.5.0/1,M10.5.0">Europe/Belfast</option>
                      <option value="CET-1CEST,M3.5.0,M10.5.0/3">Europe/Berlin</option>
                      <option value="GMT0BST,M3.5.0/1,M10.5.0">Europe/London</option>
                      <option value="CET-1CEST,M3.5.0,M10.5.0/3">Europe/Paris</option>
                      <option value="CET-1CEST,M3.5.0,M10.5.0/3">Europe/Rome</option>
                      <option value="CET-1CEST,M3.5.0,M10.5.0/3">Europe/Zurich</option>
                      <option value="<-12>12">GMT-12:00</option>
                      <option value="<-11>11">GMT-11:00</option>
                      <option value="<-10>10">GMT-10:00</option>
                      <option value="<-09>9">GMT-9:00</option>
                      <option value="<-08>8">GMT-8:00</option>
                      <option value="<-07>7">GMT-7:00</option>
                      <option value="<-06>6">GMT-6:00</option>
                      <option value="<-05>5">GMT-5:00</option>
                      <option value="<-04>4">GMT-4:00</option>
                      <option value="<-03>3">GMT-3:00</option>
                      <option value="<-02>2">GMT-2:00</option>
                      <option value="<-01>1">GMT-1:00</option>
                      <option value="GMT0">GMT+0:00</option>
                      <option value="<+01>-1">GMT+1:00</option>
                      <option value="<+02>-2">GMT+2:00</option>
                      <option value="<+03>-3">GMT+3:00</option>
                      <option value="<+04>-4">GMT+4:00</option>
                      <option value="<+05>-5">GMT+5:00</option>
                      <option value="<+06>-6">GMT+6:00</option>
                      <option value="<+07>-7">GMT+7:00</option>
                      <option value="<+08>-8">GMT+8:00</option>
                      <option value="<+09>-9">GMT+9:00</option>
                      <option value="<+10>-10">GMT+10:00</option>
                      <option value="<+11>-11">GMT+11:00</option>
                      <option value="<+12>-12">GMT+12:00</option>                                  
                    </select>
                  </div>
                  <br>                          
                  <div class="subheader">FTP / HTTPS settings</div>
                  <div class="input-group" id="ftp-group">
                    <label for="fsServer">File Server</label>
                    <input id="fsServer" name="fsServer" length=32 placeholder="File server name">
                  </div>
                  <div class="input-group" id="ftp-group">
                    <label for="fsPort">FS port</label>
                    <input id="fsPort" name="fsPport" length=6 placeholder="File server port">
                  </div>
                  <div class="input-group" id="ftp-group">
                    <label for="ftpUser">FTP user name</label>
                    <input id="ftpUser" name="ftpUser" length=32 placeholder="FTP user name">
                  </div>
                  <div class="input-group" id="ftp-group">
                    <label for="FS_Pass">FS password</label>
                    <input id="FS_Pass" name="FS_Pass" length=32 placeholder="File server password">
                  </div>
                  <div class="input-group" id="ftp-group">
                    <label for="fsWd">FS root dir</label>
                    <input id="fsWd" name="fsWd" length=64 placeholder="Working directory path">
                  </div>
                  <div class="input-group" id="ftp-group">
                    <label for="fsUse">Upload method:</label>FTP&nbsp;
                    <div class="switch">
                      <input id="fsUse" type="checkbox">
                      <label title="Upload file using FTP or HFS" class="slider" for="fsUse"></label>
                    </div>&nbsp;HFS
                  </div>
                  <br>
                  <div class="subheader">SMTP settings</div>
                  <div class="input-group" id="smtp-group">
                    <label for="smtp_server">SMTP server</label>
                    <input id="smtp_server" name="smtp_server" length=32 placeholder="smtp server name">
                  </div>
                  <div class="input-group" id="smtp-group">
                    <label for="smtp_port">SMTP port</label>
                    <input id="smtp_port" name="smtp_port" length=6 placeholder="smtp port">
                  </div>                          
                  <div class="input-group" id="smtp-group">
                    <label for="smtp_login">SMTP login</label>
                    <input id="smtp_login" name="smtp_login" length=32 placeholder="smtp login email">
                  </div>
                  <div class="input-group" id="smtp-group">
                    <label for="SMTP_Pass">SMTP password</label>
                    <input id="SMTP_Pass" name="SMTP_Pass" length=32 placeholder="smtp password">
                  </div>
                  <div class="input-group" id="ftp-group">
                    <label for="smtp_email">SMTP email</label>
                    <input id="smtp_email" name="smtp_email" length=64 placeholder="smtp email to">
                  </div>   
                  <br>
                  <div class="subheader">Authentication settings</div>
                  <div class="input-group" id="auth-group">
                      <label for="Auth_Name">Web login</label>
                      <input id="Auth_Name" name="Auth_Name" length=32 placeholder="Authentication user name">
                  </div>
                  <div class="input-group" id="auth-group">
                      <label for="Auth_Pass">Web password</label>
                      <input id="Auth_Pass" name="Auth_Pass" length=32 placeholder="Authentication password">
                  </div>
                  <div class="input-group" id="auth-group">
                    <label for="useHttps">Use HTTPS</label>
                    <div class="switch">
                      <input id="useHttps" type="checkbox">
                      <label title="Use HTTPS to access app" class="slider" for="useHttps"></label>
                    </div>
                  </div>
                  <div class="input-group" id="auth-group">
                    <label for="useSecure">Check Certs</label>
                    <div class="switch">
                      <input id="useSecure" type="checkbox">
                      <label title="Check remote servers certificate" class="slider" for="useSecure"></label>
                    </div>
                  </div>
                </div>
                <br><br>
              </nav>
              <div id="foot-spacer"></div>
            </div>
          </div>
          <section id="footer"> 
            <div class="info-group center">
                <label for="fw_version">Version</label>
                <div id="fw_version" class="info displayonly">&nbsp;</div>
            </div>
            <div class="info-group center">
                <label for="llevel">Ambient&nbsp;Light</label>
                <div id="llevel" class="info displayonly">&nbsp;</div>
            </div>
            <div class="info-group center">
                <label for="night">Night&nbsp;Time</label>
                <div id="night" class="info displayonly">&nbsp;</div>
            </div>
            <div class="info-group center">
                <label for="atemp">Camera&nbsp;Temp</label>
                <div id="atemp" class="info displayonly">&nbsp;</div>
            </div> 
            <div class="info-group center">
                <label for="battv">Battery&nbsp;Voltage</label>
                <div id="battv" class="info displayonly">&nbsp;</div>
            </div> 
            <div class="info-group center">
                <label for="clock">&nbsp;Camera&nbsp;local&nbsp;time</label>
                <div id="clock" class="info displayonly">&nbsp;</div>
            </div>
            <div class="info-group center">
                <label for="up_time">Up&nbsp;time</label>
                <div id="up_time" class="info displayonly">&nbsp;</div>
            </div>                                                 
            <div class="info-group center">
                <label for="wifi_rssi">Signal&nbsp;Strength</label>
                <div id="wifi_rssi" class="info displayonly">&nbsp;</div>
            </div>
            <div class="info-group center">
                <label for="free_heap">Free&nbsp;heap</label>
                <div id="free_heap" class="info displayonly">&nbsp;</div>
            </div>  
            <div class="info-group center">
                <label for="free_psram">Free&nbsp;PSRAM</label>
                <div id="free_psram" class="info displayonly">&nbsp;</div>
            </div>
            <div class="info-group center">
                <label for="free_bytes">Free&nbsp;SD</label>
                <div id="free_bytes" class="info displayonly">&nbsp;</div>
            </div> 
            <div class="info-group center">
                <label for="total_bytes">Total&nbsp;SD</label>
                <div id="total_bytes" class="info displayonly">&nbsp;</div>
            </div>  
          </section> 
        </div>
                                                
      </div> 
    </div>

    <div id="ShowLog" class="tabcontent">
      <br>
      <div class="grid-cols4">
        <div class="input-group" style="grid-column: span 2; grid-row: span 2">
          <fieldset> 
          <legend id="selectLog">Select Log</legend> 
          <div>
            <label title="Display RTC RAM log" for="rtcram">RTC RAM</label>
            <input class="local" id="rtcram" type="radio" name="logType" value="0" checked>
            <label title="Display Websocket log" for="websock">&nbsp;Websocket</label>
            <input class="local" id="websock" type="radio" name="logType" value="1">
            <label title="Display SD Card log" for="sdcard">&nbsp;SD Card</label>
            <input class="local" id="sdcard" type="radio" name="logType" value="2">
          </div>
          </fieldset>
        </div>
        <div class="input-group" id="dbg-group" style="text-align: left">
          <label for="dbgVerbose" class="header" title="Set verbose logging">Verbose:</label>
        </div>
        <div class="input-group" id="dbg-group" style="text-align: right">
          <div class="switch">
            <input id="dbgVerbose" type="checkbox">
            <label title="Outputs additional information to log" class="slider" for="dbgVerbose"></label>
          </div>
        </div>
        <div class="input-group" id="dbg-group" style="text-align: left">
          <label for="sdLog" class="header" title="Enable logging to sd card">Log to SD:</label>
        </div> 
        <div class="input-group" id="dbg-group" style="text-align: right">
          <div class="switch">
            <input id="sdLog" type="checkbox">
            <label title="Outputs log to SD card" class="slider" for="sdLog"></label>
          </div> 
        </div>
        <div style="grid-column: span 4"><br></div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local" id="refreshLog">Refresh Log</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local" id="clearLog">Clear Log</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text id="save" class="midText">Save</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text id="reset" class="midText">Reboot ESP</text>
          </svg>
        </div>
      </div>
      <br>
      <div id="appLog"></div>
      <br>
    </div>

    <div id="EditConfig" class="tabcontent">
      <br>
      <div class="header">Control</div>
      <br>
      <div class="grid-cols4">
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text id="save" class="midText">Save</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text id="reset" class="midText">Reboot ESP</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text id="deldata" class="midText">Reload /data</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text id="clear" class="midText">Clear NVS</text>
          </svg>
        </div>
        <div class="cfgTitle">
          <br>
          <div class="header">Settings</div>
          <div class="subheader">Press a button to view or modify settings (changed values are not validated)</div>
          <div class="subheader">Press Save button to make changes permanent</div>
          <br>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local midText" id="wifi">Network</text>
          </svg>
        </div>
        <div>
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local midText" id="peripherals">Peripherals</text>
          </svg>
        </div>
        <div id="RCconfigBtn" class="hidden">
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local midText" id="RCconfig">RC Config</text>
          </svg>
        </div>
        <div id="SVconfigBtn" class="hidden">
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local midText" id="SVconfig">Servos</text>
          </svg>
        </div>
        <div id="PGconfigBtn" class="hidden">
          <svg>
            <rect class="buttonRect" tabindex="0"/>
            <text class="local midText" id="PGconfig">PG Control</text>
          </svg>
        </div>
      </div>
      <div>
        <p class='config-group' id='Cfg'></p>
      </div>
    </div>

    <div class="alertMsg">
      <span id="alertText"></span>
    </div>

    <script>
      'use strict'
      
      let refreshInterval = 5000;
      let heartbeatInterval = 5000;
      let cameraModel = "Auxil";
      let firstCall = true;
      let appClock = Math.ceil(Date.now() / 1000);
      let sustainId = "1";
      const appLogInit = 0;
      let RCmode = false;
      let showRC = false;  
      let wsInd = 0;

      // following set from app
      let maxSteerAngle = 45;   // max steering angle in degrees from straightahead
      let maxDutyCycle = 100;   // maximum motor duty cycle % (speed)
      let minDutyCycle = 10;    // minimum motor duty cycle % needed to operate motor
      let allowReverse = true;  // set false if reverse motion not required
      let autoControl = true;   // stop motor or center the steering if control not active
      let servoCenter = 90;     // angle in degrees where servo is centered (SG90 style)

      // shorter the waitTime, more responsive RC but more load on ESP32
      let waitTime = 20;        // minimum wait in ms between controller updates


      function appInit() {
      }
      
      async function processStatus(dest, key, value, fromUser = true) {
        // process change to status value
        if (dest == ID) {
          // operation based on ID
          if (key == "wifi") getConfig("0");
          else if (key == "hostName") {
            document.title = value;
            if (fromUser) sendControl(key, value);
          } 
          else if (key == "clearLog") clearLog();
          else if (key == "refreshLog") getLog();
          else if (key == "logType") { logType = value; sendControl(key, value); return; }
          else if (key == "refreshVal") refreshInterval = value * 1000; 
          else if (key == "heartbeatRC") heartbeatInterval = value * 1000; 
          else if (key == "clockUTC") { appClock = value; checkTime(value); }
          else if (key == "peripherals") getConfig("0123");
          else if (key == "RCconfig") { doLoadStatus = false; getConfig("01234"); }
          else if (key == "SVconfig") { doLoadStatus = false; getConfig("0123456"); }
          else if (key == "PGconfig") { doLoadStatus = false; getConfig("012345"); }
          else if (key == "delete" || key == "uploadMove" || key == "upload") sdFile(key, value);
          else if (key == 'timezoneSel') fromUser = setTz(value);
          else if (key == "RCactive") Number(value) ? show($('#RCconfigBtn')) : hide($('#RCconfigBtn'));
          else if (key == "maxSteerAngle") updateMaxSteerAngle(value);
          else if (key == "maxDutyCycle") updateMaxDutyCycle(value);
          else if (key == "minDutyCycle") minDutyCycle = value;
          else if (key == "servoCenter") servoCenter = value;
          else if (key == "allowReverse") { allowReverse = value > 0 ? true : false; updateMaxDutyCycle(maxDutyCycle, true); }
          else if (key == "autoControl") autoControl = value > 0 ? true : false;
          else if (key == "PGactive") Number(value) ? show($('#PGconfigBtn')) : hide($('#PGconfigBtn'));
          else if (key == "SVactive") Number(value) ? show($('#SVconfigBtn')) : hide($('#SVconfigBtn'));
          else if (key == "waitTime") waitTime = value;
          else if (key == "AtakePhotos") { if (fromUser) wsAuxSend(wsInd, "G1"); }
          else if (key == "BabortPhotos") { if (fromUser) wsAuxSend(wsInd, "G0"); }
          else if (key == 'save') await sleep(600); // allow last input to debounce
          if (fromUser && !$('#'+key).classList.contains("local")) debounceSendControl(key, value); 
        } 
        else if (dest == CLASS) {
          // operations based on class
          if (key.substring(0, 9) == "quick-nav") navigation(value); 
          else if (key == "pin-menu") pinMenu(); 
        }
      }

      /************** menu functions ****************/
      
      function changeRange(id, min, max, val, isX = false) {
        // set parameters for range slider
        const range = $('#'+id);
        range.min = min;
        range.max = max;
        range.value = val;
        range.parentElement.children.rangeMin.innerHTML = isX ? (parseInt(min)+1)+'x' : min;
        range.parentElement.children.rangeMax.innerHTML = isX ? (parseInt(max)+1)+'x' : max;
      }
         
      function navigation(key) { 
        const i = $('#'+key); // the clicked icon
        const m = $('#'+i.getAttribute('name')); // the associated menu 

        // toggle selected icon as active, others inactive
        i.classList.toggle('active');
        $$('nav.quick-nav:not(#'+i.id+')').forEach(el => {el.classList.remove('active')});   
        
        // toggle menu attached to icon as active, others inactive
        m.classList.toggle('active');
        $$('nav.panel:not(#'+m.id+')').forEach(el => {el.classList.remove('active')});   
        m.querySelector('.menu-action').checked = isActive(i); // open if icon toggled active, close if not
        
        if (isActive(i)) {
          $('#menu-selector').classList.remove('menu-closed');
          $('#menu-selector').classList.add('menu-open');
        } else {
          $('#menu-selector').classList.add('menu-closed');
          $('#menu-selector').classList.remove('menu-open');
        }
      }

      function pinMenu() {
        // toggle menu pinned status
        if ($('#menu-container').classList.contains('menu-pinned')) {
          $$('.menu-pinned').forEach(el => {
            el.classList.remove('menu-pinned');
            el.classList.add('menu-floating');
          });
        } else {
          $$('.menu-floating').forEach(el => {
            el.classList.remove('menu-floating');
            el.classList.add('menu-pinned');
          });
        }
      }


      /************* user selection functions ************/
      
      function sendAll(key, val) {
        sendControl(key, val);
        if (wsSkt[0] != null) wsSkt[0].send('C' + key + '=' + val);
      }
      
      function configStatus(refresh) {} 
      
      function closedTab(isClosed) {}
      
      /************** RC ****************/
      function updateMaxSteerAngle(val) {
        if (maxSteerAngle != val) maxSteerAngle = val;
      }
      
      function updateMaxDutyCycle(val, force = false) {
        if (maxDutyCycle != val || force) maxDutyCycle = val;
      }
      
      function wsAuxSend(index, msg) {
        if (wsSkt[index] && wsSkt[index].readyState === WebSocket.OPEN) wsSkt[wsInd].send(msg);
        else alert("Lost connection to " + wsServers[wsInd]);
      }

      /***************************************************************************/
      
      // config for common script - leave as is
      const doCustomInit = false;
      const doInitWebSocket = true;
      let doLoadStatus = true;
      const doRefreshTimer = false;
      const doCustomSync = false;
      const doHeartbeat = false;

      const scriptFiles = ['/web?common.js', 'C:/MyStuff/Arduino/CommonMaster/Latest/common.js']; 
      for (let i = 0; i < scriptFiles.length; i++) {
        const scriptElement = document.createElement('script');
        scriptElement.src = scriptFiles[i];
        document.body.appendChild(scriptElement);
      }

      window.addEventListener('load', function() {
        initialise();
        appInit();
      });

    </script>
  </body>
</html>
